<template>
    <div v-if="props.color" :style="styleExternalIcon" class="svg-external-icon svg-icon">
    </div>
    <img v-else :src="'/src/assets/icon-svg/' + props.name + '.svg'" alt="" class="svg-icon">
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const props = defineProps({
    name: {
        type: String,
        required: true
    },
    color: {
        type: String,
        default: undefined
    }
})

const styleExternalIcon = reactive({
    mask: "url('/src/assets/icon-svg/" + props.name + ".svg') no-repeat 50% 50%",
    "-webkit-mask": "url('/src/assets/icon-svg/" + props.name + ".svg') no-repeat 50% 50%"
})

</script>

<style lang="scss" scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
}
</style>
